<template>
	<view class="home-container">
	   <view class="home-title"  :style="'background: url('+ ba +');'">
	   <!-- <view class="home-title" > -->
		     <view class="h3">
				 <u-image width="65rpx" height="65rpx" :src="require('../../static/national1.png')" style="display: inline-block;position: relative;top:17rpx;right: 10px;"></u-image>
				 退役军人崇军码
				 </view>   
			 <view  class="home-wrap">
				<!-- <u-row gutter="16">
				 	<u-col span="3"> -->
					<view class="flex-item">
						<view class="demo-layout">姓名</view>
						<view class="demo-title">{{use.name}}</view>
					</view>
				 <!-- 	</u-col>
				 	<u-col span="4"> -->
					<view class="flex-item">
						<view class="demo-layout">军人类型</view>
						<view class="demo-title">{{use.idcardType}}</view>
					</view>
				 <!-- 	</u-col>
				 	<u-col span="6"> -->
					<view class="flex-item">
						<view class="demo-layout">证件号码
						  <u-icon size="38" :name="eyeBoolean ? 'eye' : 'eye-fill'" @click="eyeshow" style="padding-left: 10rpx;"></u-icon>
						</view>
						<view class="demo-title" >{{ eyeBoolean ?  use.idcard.replace(/(.{3}).*(.{3})/,"$1***********$2") : use.idcard }}</view>
					</view>
				 	<!-- </u-col>
				 </u-row> -->
			 </view>
	   </view>
	   <view class="home-main">
		   <view  class="home-wrap-icon">
	<!-- 		 <u-row gutter="16" >
				<u-col span="4"> -->
				<view style="width: 25%;margin-bottom: 40rpx;">
					<view class="demo-layout-circle" @click="scanQRcode">
						<u-icon name="scan" color="#fff" size="55"></u-icon>
					</view>
					<view class="demo-title">扫一扫</view>
				</view>
			<!-- 	</u-col>
				<u-col span="4" > -->
				<view style="width: 25%;margin-bottom: 40rpx;">
					<template >
						<view class="demo-layout-circle" @click="goQRcode">
							<u-icon :name="require('../../static/QRcode.png')" color="#fff" size="60"></u-icon>
						</view>
						<view class="demo-title">电子码</view>
					</template>
				</view>
			<!-- 	</u-col>
				<u-col span="4" > -->
				<view style="width: 25%;margin-bottom: 40rpx;">
					<view class="demo-layout-circle" @click="tao('pages/recruit/recruit')">
						<u-icon :name="require('../../static/6.png')" color="#fff" size="70"></u-icon>
					</view>
					<view class="demo-title">就业创业</view>
				</view>
				
				<view style="width: 25%;margin-bottom: 40rpx;">
					<view class="demo-layout-circle" @click="tao('')">
						<u-icon :name="require('../../static/5.png')" color="#fff" size="70"></u-icon>
					</view>
					<view class="demo-title">军人家园</view>
				</view>
				
				<view style="width: 25%;">
					<view class="demo-layout-circle" @click="tao('')">
						<u-icon :name="require('../../static/7.png')" color="#fff" size="70"></u-icon>
					</view>
					<view class="demo-title">老兵课堂</view>
				</view>
				<view style="width: 25%;">
					<view class="demo-layout-circle" @click="tao(' pages/explain/explain')">
						<u-icon :name="require('../../static/4.png')" color="#fff" size="70"></u-icon>
					</view>
					<view class="demo-title">政策咨询</view>
				</view>
				<view style="width: 25%;">
					<view class="demo-layout-circle" @click="tao('pages/service/service')">
						<u-icon :name="require('../../static/4.png')" color="#fff" size="70"></u-icon>
					</view>
					<view class="demo-title">服务网点</view>
				</view>
				<view style="width: 25%;">
					<view class="demo-layout-circle" @click="goMy">
						<u-icon name="account" color="#fff" size="55"></u-icon>
					</view>
					<view class="demo-title">个人中心</view>
				</view>
				<!-- </u-col>
			 </u-row> -->
		   </view>
		   <view  class="home-wrap-summary">
			   <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#fa4343" :backgroundColorShow="true" :show-bar='false' bg-color='#ffece9'></u-tabs>
			   <view style="color: #828282; text-align: center; " v-if="current == 0">
				    <u-tabs :list="list1" :is-scroll="true" :current="current1" @change="change1" active-color="#ff9615"></u-tabs>
<!-- 					<view style="color: #a1a1a1;font-size: 20rpx;"></view> -->
					<u-divider color="#a1a1a1">适用范围</u-divider>
					 <view class="home-card">
						 <view v-if="Tabslist.length == 0" style="text-align: center;margin-top: 20rpx;">
							 尽请期待!
						 </view>
						 <view v-for="(item,index) in Tabslist"  v-else>
							 <view class="tabslist" >
								 <u-icon :name="item.icon" color="#ff5500" size="40" style="position: relative;top: 10rpx;"></u-icon>
								   \n\n{{item.text}}
							 </view>
							  <u-line color="#e2e2e2" margin="20rpx 0rpx 10rpx 0rpx"/>
						 </view>
					 </view>
			   </view>
			 <!--  <view style="color: #828282; text-align: center;" v-if="current == 1">
			   		<view  class="home-card-icon">
						<view style="width: 30%;">
							<view class="demo-layout-circle" @click="goCard">
								<u-icon :name="require('../../static/1.png')" color="#fff" size="80"></u-icon>
							</view>
							<view class="demo-title">服务站</view>
						</view>
						<view style="width: 30%;" >
							<template >
								<view class="demo-layout-circle"  @click="goCard">
									<u-icon :name="require('../../static/2.png')" color="#fff" size="80"></u-icon>
								</view>
								<view class="demo-title">最新活动</view>
							</template>
						</view>
						<view style="width: 30%;" >
							<template >
								<view class="demo-layout-circle"  @click="goCard">
									<u-icon :name="require('../../static/3.png')" color="#fff" size="80"></u-icon>
								</view>
								<view class="demo-title">意见建议</view>
							</template>
						</view>
			   	    </view>
			   </view> -->
		   </view>
	   </view>
	   	<u-toast ref="uToast" />
		<u-modal v-model="show1" :content="content">
		</u-modal>
		<u-modal v-model="show" :show-title='false'  @confirm="confirm">
			<view class="slot-content" style="margin: 40rpx;">
				<view style="text-align: center;color: #007AFF;">
					<u-icon label="验证成功" label-color='#007AFF' color="#007AFF" size="50" name="checkmark-circle-fill" label-size='50'></u-icon>
				</view>
				<view style="width: 100%;margin: 0 auto;">
					<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
						<view style="display: flex;margin-top: 25rpx;" > 
						<view style="margin-right: 30rpx;">当前军人姓名:</view>
						  {{scanForm.name}}
						</view>
						<view style="display: flex;margin-top: 25rpx;margin-bottom: 13rpx;">
							<view style="margin-right: 30rpx;">军人信用等级:</view>
							{{scanForm.beisaomazhe}}级
						</view>
						 <view style="display: flex;">
							<view style="padding-top: 15rpx;margin-right: 30rpx;">消费金额:</view>
						      <u-input v-model="scanForm.money" :type="number" placeholder="请输入消费金额"  :border="border" />
						 </view>
						<view style="display: flex;">
							<view style="padding-top: 15rpx;margin-right: 30rpx;">享受折扣:</view>
							<u-input v-model="scanForm.discount" type="text" placeholder="请输入享受折扣"  :border="border" />
						</view>
						<view style="display: flex;">
							<view style="padding-top: 15rpx;margin-right: 30rpx;">备注:</view>
							<u-input v-model="scanForm.text" type="text" placeholder="请输入备注"  :border="border" />
						</view>
					</u-form>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	// import "muse-ui/lib/styles/base.less";
    import {ba2} from "../../assets/img/base1.js"
    import { Saomadengji } from "../../api/common.js"
	export default {
		data() {
			return {
				number:'number',
				list: [{name: '社会化服务'},  
				// {name: '线上服务'},
				],
				list1:[
				{
					name: '餐饮'
				},{
					name: '住宿'
				},
				{
					name: '出行'
				},
				{
					name: '娱乐'
				},
				{
					name:'购物'
				},
				{
					name:'健康',
				},
				{
					name:'游玩'
				}],
				Tabslist:[
					// {icon:require('../../static/Hotel.png'),text:'上海南泉大酒店上海'},
					// {icon:require('../../static/Hotel.png'),text:'上海南泉大酒店 '},
					// {icon:require('../../static/Hotel.png'),text:'上海南泉大酒店 '},
				],
				current: 0,
				current1: 0,
				ba:ba2,
				use:{
					name:'***',
					idcard:'*******************',
					tel: '---',
					idcardType: '****',
					busesNumber: '---',
					creditRating:  '---',
					qrcode: '假',
					scan:'假'
				},
				eyeBoolean: true,
				show:false,
				show1: false,
				content:'您不是管理员，无法进行扫码验证',
				scanForm:{
					name:'',
					beisaomazhe:'',
					money:'',
					discount:'',
					text:''
				}
				
			}
		},
        
		methods: {
			change(index) {
				this.current = index;
			},
			change1(index) {
				this.current1 = index;
				let arry1 = [
					{icon:require('../../static/food.png'),text:'舜泉大酒店'},
					{icon:require('../../static/food.png'),text:'煌中煌大酒店'},
					{icon:require('../../static/food.png'),text:'金旺福大酒店'},
					{icon:require('../../static/food.png'),text:'新农村阿婆菜'},
					{icon:require('../../static/food.png'),text:'柴火里餐厅'},
					{icon:require('../../static/food.png'),text:'外婆烧'}
				]
				let arry2 = [
					{icon:require('../../static/Hotel.png'),text:'雷迪森万锦大酒店'},
					{icon:require('../../static/Hotel.png'),text:'上虞天玥开元名都大酒店 '},
					{icon:require('../../static/Hotel.png'),text:'上虞宾馆 '},
					{icon:require('../../static/Hotel.png'),text:'舜泉大酒店 '}
				]
				let arry3 = [
					{icon:require('../../static/Travel.png'),text:'绍兴德星汽车有限公司(奔驰4S店)'},
					{icon:require('../../static/Travel.png'),text:'上虞金昌宝顺汽车销售服务有限公司(宝马4S店)'},
					{icon:require('../../static/Travel.png'),text:'绍兴市上虞康众汽车销售服务有限公司(上汽大众4S店)'},
					{icon:require('../../static/Travel.png'),text:'绍兴福瑞通汽车销售有限公司'}
				]
	
				let arry4 = [
					{icon:require('../../static/distraction.png'),text:'大通影城'},
					{icon:require('../../static/distraction.png'),text:'金鑫美容院'}
				]
				let arry5 = [
					{icon:require('../../static/Beauty.png'),text:'上百万和城'},
					{icon:require('../../static/Beauty.png'),text:'大通商城 '},
					{icon:require('../../static/Beauty.png'),text:'大通超市 '},
					{icon:require('../../static/Beauty.png'),text:'大通购物中心'}
				]
				let arry6 = [
					{icon:require('../../static/keep.png'),text:'复旦口腔'}
				]
				let arry7 = [
					// {icon:require('../../static/Training.png'),text:'上海南泉大酒店上海'},
					// {icon:require('../../static/Training.png'),text:'上海南泉大酒店 '},
					// {icon:require('../../static/Training.png'),text:'上海南泉大酒店 '}
				]
				
				if(index == '0'){
					this.Tabslist = arry1
				}else if(index =='1'){
					this.Tabslist = arry2
				}else if(index == '2'){
					this.Tabslist = arry3
				}else if(index == '3'){
					this.Tabslist = arry4
				}else if(index == '4'){
					this.Tabslist = arry5
				}else if(index == '5'){
					this.Tabslist = arry6
				}else if(index == '6'){
					this.Tabslist = arry7
				}
			},
			// 扫码功能
			scanQRcode(){
				let that = this
				let now = Date.now();
				if(this.use.scan =='假' ? true : false){
					that.content = '您不是管理员，无法进行扫码验证';
					that.show1 = true;
				}else {
				uni.scanCode({
					scanType: ['qrCode'],
					success:(res)=>{
						let {result} = res;
						let resultToArray = result.split(';')
						// console.log(resultToArray[2] )
						console.log(resultToArray[2] > (now+5*60*1000))
						if (!that.$u.test.idCard(resultToArray[1])) {
							// uni.showToast({
							// 	title: '请扫取正确的身份证证！',
							// 	icon: 'none'
							// })
							that.content = '验证失败，请检查崇军码';
							that.show1 = true;
						} else if(resultToArray[2] < (now-5*60*1000)){
							// uni.showToast({
							// 	title: '超过了当前五分钟！二维码失效',
							// 	icon: 'none'
							// })  
							that.content = '超过了当前五分钟！验证失败，请重新刷新崇军码';
							that.show1 = true;
						}else{
							that.scanForm.name = resultToArray[0]
							that.scanForm.beisaomazhe = resultToArray[3]
							// that.content = `验证成功！军人姓名:${that.use.name} 当前信用等级：${that.use.creditRating}级`
							that.show = true;
							// that.$u.route({url:'pages/qrcode/index'})
						}
					}
				})
				}
			},
		    //电子码
			goQRcode(){
				if(this.use.qrcode =='假' ? true : false ) {
					this.content = '您的权限不足,无法生成崇军码!'
					return  this.show1 = true;
				}
				this.$backLogin('pages/qrcode/index')
				// this.$u.route({
				// 	url: 'pages/qrcode/index'
				// })
			},
			// 个人中心
			goMy(){
				// this.$u.route({
				// 	url: 'pages/my/index'
				// })
				// if( true ) return this.$refs.uToast.show({
				// 	title: '该功能未开放',
				// 	type: 'warning', 
				// })
				this.$backLogin('pages/my/index')
			},
			tao(path){
				  uni.navigateToMiniProgram({
					appId: 'wxec700e2d3092ee04',
					path: path,
					success: res => {
					  // 打开成功
					  console.log("打开成功", res);
					},
					fail: err => {
					  console.log(err);
					}
				  });
			},
			eyeshow(){
				this.eyeBoolean = !this.eyeBoolean
			},
			goCard(){
			     this.$refs.uToast.show({
					title: '功能尚未开放,敬请关注!',
					type: 'warning', 
				})
			},
			confirm(){
				 var replaceArray = [];
				  for (let i = 0; i < this.scanForm.discount.length; ++i) {//正则判断是否合法
					var textValue = (/^[0-9_.]$/.test(this.scanForm.discount.charAt(i)));
					if (!textValue) {
					  replaceArray.push(this.scanForm.discount.charAt(i));
					}
				  }
				  if (replaceArray.length != 0) {
					// wx.showToast({
					//   title: '只能输入数字，小数点和加减号',
					//   icon: 'none'
					// })
					for (let j = 0; j < replaceArray.length; ++j) {//循环删除不合法内容
					  this.scanForm.discount = this.scanForm.discount.replace(replaceArray[j], '');
					}
					this.$refs.uToast.show({title: '只能输入数字，小数点',type: 'warning', })
					return this.show = true
				  }
				if(!this.scanForm.money) {
					 this.$refs.uToast.show({title: '请输入消费金额',type: 'warning', })
					return this.show = true
				} 
				if(!this.scanForm.discount){
					 this.$refs.uToast.show({title: '请输入享受折扣',type: 'warning', })
					 return this.show = true
				} 
				Saomadengji(this.use.name,this.scanForm.name,(this.scanForm.money+'元'),this.scanForm.discount,this.scanForm.text).then(res=>{
					if(res.code == 0){
						this.show = false;
						this.$refs.uToast.show({
							title: '登记扫码成功！',
							type: 'success', 
						})
						// that.$u.route({type:'navigateBack'})
						// that.$u.route({type:'redirectTo',url: 'pages/home/index'})
					}else{
						uni.showToast({
							title: res.message,
							icon:"none"
						});
					}
				}).catch(error=>{
					uni.showToast({
							title: error.message,
							icon:"none"
					});
				})
			}
		 },
		 onLoad(){
			let _that =this
			uni.getStorage({
			    key: 'user',
			    success: function (res) {
			        // console.log('12132',res.data);
					_that.use = res.data;	
			    }
			});
			_that.change1(0)
		 },
		 onShow(){
			let _that =this
			// uni.getStorage({
			//     key: 'user',
			//     success: function (res) {
			//         console.log('12132',res.data);
			// 		_that.use = res.data;	
			//     }
			// });
			try {
			    const value = uni.getStorageSync('user');
			    if (value) {
			        _that.use = value;
			    }
			} catch (e) {
			    // error
			}
			_that.change1(0)
		},
		onUniNViewMessage(){
			console.log(123)
		}
	}
	// this.$Router.push('/pages_Dynamic_survey/index')
</script>

<style lang="scss">

	.home-container {
			background-color: #FFFFFF;
			background-repeat: no-repeat;
		    background-size:cover; 
			height: 100vh;
			width: 100%;
			-webkit-overflow-scrolling: touch;
          .home-title {
			  // padding-top: 15rpx;
			  height: 30vh;
			  border-radius: 0 0 30rpx 30rpx;
			  .h3 {
				  padding: 20rpx 0;
				  color: #FFFFFF;
				  font-size: 40rpx;
				  text-align: center;
				  font-weight: bold;
			  }
			  .home-wrap{
				  width: 100%;
				  // margin: 10rpx 30rpx;
				  // background-color: #ff9e9e;
				  height: 246rpx;
				  border-radius: 10rpx;
				  padding-top: 73rpx;
				  display: flex;
				  justify-content: space-around;
				  flex-wrap: wrap;
				  .flex-item{
					  .demo-layout {
						  color:#ececec;
						  font-size: 30rpx;
						  padding-bottom: 15rpx;
						  // padding-left: 15rpx;
					  }
					  .demo-title {
						  color:#fff;
						  font-size: 31rpx;
						  // padding-left: 15rpx;
						  font-weight: bold;
					  }
				  }
				  
			  }
		  }
		  .home-main{
			   // height: 60vh; 
			   background-color: #FFFFFF;
			   -webkit-overflow-scrolling: touch;
			   .home-wrap-icon{
				   width: 100%;
				   margin: 30rpx 0rpx;
				   display: flex;
				   justify-content: space-around;
				   flex-direction: row;
				   flex-wrap: wrap;
				  .demo-layout-circle {
					  margin: 0 auto;
					  width: 125rpx;
					  height: 125rpx;
					  background-color: #ff5457;
					  border-radius: 50%;
					  -moz-box-shadow:1px 2px 9px #F2AEAE; 
					  -webkit-box-shadow:1px 2px 9px #F2AEAE; 
					  box-shadow:1px 2px 9px #F2AEAE;
					  u-icon{
						height: 100%;
						 display: flex;
						 justify-content: center; /* 水平居中 */
						 align-items: center;     /* 垂直居中 */
					  }
				  } 
				  .demo-title {
					  margin-top: 15rpx;
					  font-size: 30rpx;
					  color: #535353;
					  text-align: center;
				  }
			   }
			   .home-wrap-summary {
				   margin: 5rpx 30rpx  40rpx 30rpx;
				   // width: 100%;
				   height: 650rpx;
				   background-color: #fff;
				   border-radius: 15rpx;
				   -moz-box-shadow:1px 1px 7px #dad9d9; 
				   -webkit-box-shadow:1px 1px 7px #dad9d9;
					box-shadow:1px 1px 7px #dad9d9;
					-webkit-overflow-scrolling: touch;
					.home-card {
						width: 95%;
						text-align: left;
						margin: 10rpx auto;
						height: 435rpx;
						overflow:auto;
						-webkit-overflow-scrolling: touch;
						.tabslist{
							width: 100%;
							font-size: 30rpx;
							line-height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							// height: 75rpx;
						}
					}
			        .home-card-icon {
						width: 100%;
						 margin: 0rpx 0rpx;
						 display: flex;
						 justify-content: space-around;
						 flex-wrap: wrap;
						.demo-layout-circle {
							  margin: 0rpx auto;
							  width: 135rpx;
							  height: 135rpx;
							  // background-color: #ff5457;
							  border-radius: 50%;
							  // -moz-box-shadow:1px 2px 9px #F2AEAE; 
							  // -webkit-box-shadow:1px 2px 9px #F2AEAE; 
							  // box-shadow:1px 2px 9px #F2AEAE;
							  u-icon{
								height: 100%;
								 display: flex;
								 justify-content: center; /* 水平居中 */
								 align-items: center;     /* 垂直居中 */
							  }
						} 
						.demo-title {
							  margin-top: 15rpx;
							  font-size: 30rpx;
							  color: #535353;
							  text-align: center;
						}
					}
			   }
		  }
		}
</style>
